<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style type="text/css">
        body {
            padding: 10px;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        .container {
            background-color: rgb(179, 255, 0);
            width: 100%;
            top: 100px;
        }

        .divupdown {
            position: absolute;
            width: 340px;
            height: 130px;
            border: 1px solid grey;
            font-size: 13px;
            visibility: hidden;
            overflow: auto;
        }

        ul.updown-ul {
            list-style: none;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        ul.updown-ul li {
            padding-left: 5px;
            padding-top: 5px;
        }

        ul.updown-ul li:hover {
            background-color: cornsilk;
        }
    </style>
</head>

<body>
    <div class="container">

        <div>
            <h4>normal</h4>
        </div>
        <div style="padding-left: 10px; padding-right: 10px;background-color: antiquewhite;">
            <span>padding-left: 10px; padding-right: 10px;background-color: antiquewhite;</span>
        </div>

        <textarea id="text" oninput="show(this)" style="width: 540px; height: 210px;"></textarea>
        <div id="show" class="divupdown">
            <ul class="updown-ul" id="downul">

            </ul>
        </div>

    </div>
    <script src="./js/autoselect.js" type="text/javascript"></script>
    <script type="text/javascript">  
        var arr = [
            { key: 'select', type: 'key', leaf: true },
            { key: 'from', type: 'key', leaf: true },
            { key: 'where', type: 'key', left: true },
            { key: 'order', type: 'key', left: true },
            { key: 'by', type: 'key', left: true },
            { key: 'group', type: 'key', left: true },
            { key: 'update', type: 'key', left: true },
            { key: 'insert', type: 'key', left: true }
        ];
        var default_option = [
            { key: 'select', type: 'key', leaf: true },
            { key: 'from', type: 'key', leaf: true },
            { key: 'where', type: 'key', left: true }
        ];

        function show(elem) {
            console.log('onchange');
            var val = elem.value;
            var slen = val.lastIndexOf(' ');
            var length = val.length;
            var show = document.getElementById('show');
            var oul;
            if (slen == val.length - 1) {
                show.style.visibility = "hidden";
                return;
            }else{
                var rmnode = document.getElementById('downul');
                rmnode.parentNode.removeChild(rmnode);
                oul = document.createElement('ul');
                oul.setAttribute('id','downul');
                oul.setAttribute('class','updown-ul');
                show.appendChild(oul);
            }
            var start_time = new Date().getTime();
            var i = 0;
            var search = val.slice(slen + 1, length);
            console.log("search = " + search);
            var result = [];
            for (; i < arr.length; i++) {
                var item = arr[i];
                item.key.indexOf(search) == -1 ? null : result.push(item);
            }
            var end_time = new Date().getTime();
            console.log(i + ", time = " + (end_time - start_time));

            //var down = document.getElementById('downul'); 
            for(var i=0; i<result.length; i++){
                var oli = document.createElement('li');
                var key = result[i].key;
                oli.innerText = result[i].key;
                oli.index = slen+1;
                // down.innerHTML = '<li onclick="li_onclick(this);">'+result[i].key+'</li>';
                oul.appendChild(oli);
                oli.onclick = function(){
                    elem.value = elem.value.substring(0,this.index)+ this.innerHTML;
                    show.style.visibility = "hidden";
                }
                // oli.addEventListener('onclick',li_onclick(oli),false);
            }

            var p = kingwolfofsky.getInputPositon(elem);
            
            show.style.top = p.bottom + 'px';
            show.style.left = p.left + 'px';
            show.style.display = 'inherit';
            show.style.visibility = 'visible';
        }
        function li_onclick(obj){
            var text = obj.innerText;
            console.log("value = "+text);
            var show = document.getElementById('show');
            var textarea = document.getElementById('text');
            // textarea.value = textarea.value.substring(0,len)+ value;
            textarea.value = textarea.value+ text;
            show.style.visibility = "hidden";
        }
        function blur_event(event) {
            console.log('blur');
            // document.getElementById('show').style.display = "none";
            //event.stopPropagation();
        }
    </script>
</body>

</html>